<template>
    <div class="addFriends">
        <v-header title="新朋友"></v-header>
        <div :style="{height: swiperHeight}">
            <scroll ref="scroll" style="overflow: hidden; height: 100%">
                <div>
                    <div class="bottomLineWrapper" v-for="(item, index) in newFriendsList" :key="item.id">
                      <v-touch ref="tapper" @press="press(item, index)" :press-options="{time: 800}">
                          <div class="centerbody">
                                <cell-box class="cell-wrapper">
                                    <div style="display: flex;">
                                        <div style="padding: 7px 53px;">
                                            <div class="nickNameWrapper">
                                                <p>
                                                    {{item.followerNickname}}
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="agreeFriends">
                                        <button v-if="item.isFriends" class="btnHavedAgree">已接受</button>
                                        <button v-else @click.stop="addFollowStatus(item, index)" class="btnAgree" :style="{color: textColor, backgroundColor: textBackgroundColor}">接受</button>
                                    </div>
                                </cell-box>
                          </div>
                        </v-touch>
                        <img :src="item.followerHeadUrl" alt="" class="headerimage" @click="handlePersonalMessage(item.follower)">
                    </div>
                </div>
            </scroll>
       </div>
    </div>
</template>

<script>
import VHeader from '@/components/v-header/v-header'
import imageTop from '@/assets/img/default_avatar.png'
import Scroll from '@/components/scroll/scroll'
import { Cell, CellBox, Icon } from 'vux'
import { localUser } from '@/assets/js/local'
import { QINIU_PREFIX } from '@/api/config'
import axios from '@/api/axiosApi'

export default {
  data () {
    return {
      imageTop: imageTop,
      swiperHeight: '500px',
      newFriendsList: [],
      agreeText: '接受',
      textColor: '#fff',
      textBackgroundColor: '#1AAC19',
      followStatus: 0
    }
  },
  created () {
    this.getFansList()
  },
  methods: {
    // 获取粉丝列表
    getFansList () {
      axios.get(this, '/v1/follows', {following: localUser.get('id'), valid: 1, pageNum: this.pageNum, pageSize: this.pageSize}, (data) => {
        data.forEach(item => {
          if (item.followerHeadUrl) {
            if (item.followerHeadUrl.indexOf(QINIU_PREFIX) > -1) {
              item.followerHeadUrl += '-bheader'
            }
          } else {
            item.followerHeadUrl = imageTop
          }
        })
        this.temp = data
        this.getAllFriends()
      })
    },
    // 获取好友列表
    getAllFriends () {
      const _self = this
      axios.get(_self, 'v1/friends/' + localUser.get('id'), null, (data) => {
        _self.temp.forEach(item => {
          if (item != null) {
            item.isFriends = false
            data.forEach(element => {
              if (element && element.id === item.follower) {
                item.isFriends = true
              }
            })
          }
        })
        _self.newFriendsList = _self.temp
      })
    },
    // 添加关注
    addFollowStatus (item, index) {
      const userId = localUser.get('id')
      if (userId == null) {
        this.$vux.toast.text(this.$t('toast.mustLogin'), 'middle')
        return
      }
      if (this.sendRequest) {
        return
      }
      const valid = this.followStatus = 1
      this.followStatus = valid
      this.sendRequest = true
      const _self = this
      axios.post(this, `/v1/follow/${userId}/${item.follower}/${valid}`, null, (data) => {
        _self.sendRequest = false
        if (valid === 1) {
          axios.post(this, '/v1/pushAlias', {
            userId: item.follower,
            content: `${localUser.get('nickname')}刚刚加你为好友，赶快去看一看吧~`,
            linkUrl: `/user/newfriends`
          })
          _self.newFriendsList[index].isFriends = true
          this.$vux.toast.text('加好友成功')
        }
      }, null, false)
    },
    cancelFollowStatus (targetUserId) {
      const userId = localUser.get('id')
      if (userId == null) {
        this.$vux.toast.text(this.$t('toast.mustLogin'), 'middle')
        return
      }
      if (this.sendRequest) {
        return
      }
      const valid = this.followStatus = 0
      this.followStatus = valid
      this.sendRequest = true
      const _self = this
      axios.post(this, `/v1/follow/${userId}/${targetUserId}/${valid}`, null, (data) => {
        _self.sendRequest = false
        this.$vux.toast.text('删除好友成功')
      }, null, false)
    },
    handlePersonalMessage (id) {
      this.$router.push('/user/archives/' + id)
    },
    press (item, index) {
      const _self = this
      this.$vux.confirm.show({
        title: '温馨提示',
        content: '确定删除此好友吗',
        onCancel () {
        },
        onConfirm () {
          _self.cancelFollowStatus(item.follower)
          _self.newFriendsList.splice(index, 1)
        }
      })
    }
  },
  mounted () {
    this.swiperHeight = window.innerHeight - 64 + 'px'
  },
  components: {
    VHeader,
    Scroll,
    Cell,
    CellBox,
    Icon,
    localUser,
    QINIU_PREFIX,
    axios
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/css/variable.styl'
.addFriends {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: white;
  z-index: 101;
  height:100%;
}

.bottomLineWrapper {
  position relative
  border-bottom-style solid
  border-width:1px
  border-color: #E4E4E4
  .nickNameWrapper {
      p {
        font-weight bold
      }
  }

  .agreeFriends {
      display flex
  }
}

.cell-wrapper {
    display flex
    justify-content space-between
}

.btnAgree {
    width: 61px;
    height: 33px;
    border: solid 1px #E0E0E0;
    border-radius 3px
    &:focus {
        outline: none
    }
}

.btnHavedAgree {
    color: #b4afaf;
    width: 61px;
    height: 33px;
    border: solid 1px #E0E0E0;
    border-radius 3px
    background-color: #fff;
    &:focus {
        outline: none
    }
}

.headerimage {
    z-index 500
    position absolute
    width:40px;
    height:40px;
    margin-top: -50px;
    margin-left: 15px;
}
</style>
